<template>
	<view class="container">
		<view class="row">
			<view class="label">
				公司名称
			</view>
			<view class="value">
				<u--input placeholder="请输入公司名称" border="surround" v-model="form.comp_name"></u--input>
			</view>
		</view>
		<view class="row">
			<view class="label">
				法定代表人
			</view>
			<view class="value">
				<u--input placeholder="请输入法定代表人" border="surround" v-model="form.name"></u--input>
			</view>
		</view>
		<view class="row">
			<view class="label">
				法人手机号
			</view>
			<view class="value">
				<u--input placeholder="请输入手机号" border="surround" v-model="form.phone"></u--input>
			</view>
		</view>
		<view class="row">
			<view class="label">
				法人地址
			</view>
			<view class="value">
				<u--input placeholder="请输入地址" border="surround" v-model="form.address"></u--input>
			</view>
		</view>
		<view class="row">

		</view>
		<view class="title">
			营业执照
		</view>
		<image :src="form.business_license" mode="scaleToFill" style="width: 268rpx;height: 186rpx;margin: 20rpx 0;"
			v-if="form.business_license" @click="uploadFile('license')"></image>
		<image src="/static/images/authentication/company_card.png" mode="widthFix"
			style="width: 268rpx;height: 186rpx;margin: 20rpx 0;" v-else @click="uploadFile('license')"></image>
		<view class="title">
			法人身份证正反面
		</view>
		<view class="image-row">
			<image :src="form.id_card_front" mode="scaleToFill" style="width: 268rpx;height: 186rpx;margin: 20rpx 0;"
				v-if="form.id_card_front" @click="uploadFile('front')"></image>
			<image src="/static/images/authentication/id1.png" mode="widthFix"
				style="width: 268rpx;height: 186rpx;margin: 20rpx 0;" v-else @click="uploadFile('front')"></image>
			<image :src="form.id_card_back" mode="scaleToFill" style="width: 268rpx;height: 186rpx;;margin: 20rpx 0;"
				v-if="form.id_card_back" @click="uploadFile('back')"></image>
			<image src="/static/images/authentication/id2.png" mode="widthFix"
				style="width: 268rpx;height: 186rpx;margin: 20rpx 0;" v-else @click="uploadFile('back')"></image>
		</view>
		<bottomComponent>
			<view class="bottom-btn" @click="submitHandler">
				{{form.id && form.audit_status == 0?'审核中':'提交审核'}}
			</view>
		</bottomComponent>
	</view>
</template>

<script>
	import utils from "@/utils/common.js"
	import bottomComponent from "@/components/bottomComponent/index.vue"
	import {
		roleSave,
		roleDetail
	} from "@/api/role.js"
	export default {
		components: {
			bottomComponent
		},
		data() {
			return {
				form: {
					id_card_front: "",
					id_card_back: "",
					business_license: ""
				}
			}
		},
		onLoad(e) {
			const {
				id
			} = e
			if (id) {
				roleDetail({
						id
					})
					.then(res => {
						this.form = res
					})
			}
		},
		methods: {
			submitHandler() {
				if (this.form.id && this.form.audit_status == 0) {
					uni.showToast({
						title: "审核中，请等待管理员审核",
						icon: "none"
					})
					return
				}
				roleSave({
						...this.form,
						file: JSON.stringify([]),
						role_type: 'role_comp'
					})
					.then(res => {
						uni.showToast({
							title: "已提交审核",
							icon: "none",
							success() {
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									})
								}, 500)
							}
						})
					})
			},
			uploadFile(type) {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: async (res) => {
						console.log(res.tempFilePaths)
						const result = await utils.uploadFileToOss(res.tempFilePaths[0])
						if (type == 'front') {
							this.form.id_card_front = result
						} else if (type == 'back') {
							this.form.id_card_back = result
						} else {
							this.form.business_license = result
						}
					}
				});
			}
		}
	}
</script>

<style>
	page {
		background: #649CF6 linear-gradient(360deg, #fff 0%, #ECF3FF 60%, #F1F6FF 96%, #F1F6FF 100%);
	}
</style>
<style scoped lang="scss">
	.container {
		margin: 10rpx auto;
		width: 730rpx;
		padding: 18rpx 28rpx 160rpx;
		background-color: #fff;
		box-sizing: border-box;

		.row {
			display: flex;
			padding-top: 10rpx;
			align-items: center;

			.label {
				margin-right: 20rpx;
				width: 170rpx;
				text-align: justify;
				text-align-last: justify;
				/*兼容ie*/
				text-justify: distribute-all-lines;
				font-weight: 500;
				font-size: 34rpx;
				color: #000000;
				line-height: 52rpx;
			}
		}

		.row+.row {
			padding-top: 20rpx;
			margin-top: 10rpx;
			border-top: 2rpx solid #F5F5F5;
		}

		.title {
			margin-top: 20rpx;
			font-weight: 500;
			font-size: 34rpx;
			color: #000000;
			line-height: 52rpx;
		}
	}

	.bottom-btn {
		width: 630rpx;
		line-height: 86rpx;
		background: #2B5BF8;
		border-radius: 86rpx;
		font-weight: 500;
		font-size: 38rpx;
		color: #FFFFFF;
		text-align: center;
	}

	.image-row {
		display: flex;
		justify-content: space-between;
	}
</style>